import VueDatepickerLocal from "vue-datepicker-local";

/**
 * 载入项目引导文件
 */
require('./bootstrap');

window.Vue = require('vue');

const app = new Vue({
    el: '#wrapper',
    data:{
        table:null,
        searchParams:{
            card_id:'',
            user_card_code:'',
            openid:'',
            outer_str:'',
        },
        codeData:{receive_id:0,code:''},
        box:null,
    },
    mounted:function(){
        let tableOptions = utils.bootstraptableOptions;
        //请求后台的URL
        tableOptions.url = page_params.url_list;
        //搜索参数
        tableOptions.queryParams = (params) => {//传递参数（*）
            //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            var temp = {
                pageSize:params.pageSize,
                page:params.pageNumber,
            };
            return _.merge(temp, this.searchParams);
        };
        tableOptions.columns = [
            {field: 'id'},
            {field: 'card_id',title: '卡券ID',},
            {field: 'user_card_code',title: '卡券Code码',},
            {field: 'user_openid',title: '领券用户openId',},
            {field: 'nickname',title: '用户昵称',},
            {
                field: 'user.headimgurl',title: '头像',
                formatter:function (value, row, index) {
                    if (value){
                        return '<img alt="image" class="img-circle img-sm" src="' + value + '">';
                    }
                }
            },
            {
                field: 'is_give_by_friend',title: '是否为转增领取',
                formatter:function (value, row, index) {
                    if (value == 1){
                        return '<span class="label label-info">是</span>';
                    }else{
                        return '<span class="label label-warning">否</span>';
                    }
                }
            },
            {field: 'friend_user_name',title: '发起转赠用户openId',visible:false,},
            {field: 'old_user_card_code',title: '转增前code',visible:false,},
            {field: 'outer_str',title: '场景值'},
            {
                field: 'is_restore_member_card',title: '删除后是否可重新找回',visible:false,
                formatter:function (value, row, index) {
                    if (value == 1){
                        return '<span class="label label-info">是</span>';
                    }else{
                        return '<span class="label label-warning">否</span>';
                    }
                }
            },
            {field: 'receive_time',title: '领取时间'},
            {
                field: 'operate',
                title: '操作',
                formatter: (value, row, index) => {
                    let buttons = [];
                    //重新设置code
                    if (page_params.url_updatecode){
                        buttons.push('<button class="btn btn-primary btn-sm btn-updatecode"><i class="fa fa-eye"></i> 设置CODE</button>');
                    }
                    if (page_params.url_disable){
                        buttons.push('<button class="btn btn-warning btn-disable"><i class="fa fa-lock"></i> 设为无效</button>');
                    }
                    return buttons.join("\r\n");
                },//自定义方法，添加操作按钮
                events : {
                    'click .btn-updatecode' : (e, value, row, index) => {
                        this.codeData.receive_id = row.id;
                        this.codeData.code = '';
                        this.box = layer.open({
                            type: 1,
                            title: '设置CODE',
                            anim: 2,
                            shadeClose: true, //开启遮罩关闭
                            skin: 'layui-layer-molv', //加上边框
                            area: ['500px', '250px'], //宽高
                            content: $('#box-updatecode')
                        });
                    },
                    'click .btn-disable' : (e, value, row, index) => {
                        utils.confirm(page_params.url_disable,{'receive_id':row.id}, (response, data) =>{
                            data = response.data;
                            utils.showToastr(data);
                            if (data.status == 'success') {
                                this.query();
                            }
                        },'你确定将该用户的卡券设置无效么？',
                            "1.设置卡券失效的操作不可逆，即无法将设置为失效的卡券调回有效状态，商家须慎重调用该接口。<br>" +
                            "2.商户调用失效接口前须与顾客事先告知并取得同意，否则因此带来的顾客投诉，微信将会按照<a href=\"https://mp.weixin.qq.com/cgi-bin/readtemplate?t=cardticket/faq_tmpl&type=info&token=1668276868&lang=zh_CN#0dot5\">《微信运营处罚规则》</a>");
                    },
                }
            },
        ];
        this.table = $("#table").bootstrapTable(tableOptions);
    },
    methods: {
        query: function () {
            this.table.bootstrapTable('refresh');
        },
        saveCode:function(){
            utils.ajaxPost(page_params.url_updatecode, this.codeData, (response, params) => {
                if (response.data.status == 'success'){
                    layer.close(this.box);
                    this.query();
                }
                utils.showToastr(response.data);
            });
        },
        close:function () {
            layer.close(this.box);
        }
    },
    components: {
    },
});